<template>
  <div class="dashboard-container">
    <!-- 顶部导航栏 -->
    <header class="dashboard-header">
      <div class="header-left">
        <h1>论坛后台管理系统</h1>
      </div>
      <div class="header-right">
        <div class="user-info">
          <span>欢迎, {{ username }}</span>
          <button @click="handleLogout" class="logout-btn">退出登录</button>
        </div>
      </div>
    </header>

    <!-- 主要内容区域 -->
    <main class="dashboard-main">
      <!-- 侧边栏 -->
      <aside class="sidebar">
        <nav class="sidebar-nav">
          <ul>
            <li :class="{ active: currentView === 'dashboard' }">
              <a @click="switchView('dashboard')" class="nav-link">
                <i class="icon-dashboard"></i>
                <span>仪表盘</span>
              </a>
            </li>
            <li :class="{ active: currentView === 'users' }">
              <a @click="switchView('users')" class="nav-link">
                <i class="icon-users"></i>
                <span>用户管理</span>
              </a>
            </li>
            <li :class="{ active: currentView === 'roles' }">
              <a @click="switchView('roles')" class="nav-link">
                <i class="icon-roles"></i>
                <span>角色管理</span>
              </a>
            </li>
            <li :class="{ active: currentView === 'menus' }">
              <a @click="switchView('menus')" class="nav-link">
                <i class="icon-menu"></i>
                <span>菜单管理</span>
              </a>
            </li>
            <li :class="{ active: currentView === 'posts' }">
              <a @click="switchView('posts')" class="nav-link">
                <i class="icon-posts"></i>
                <span>帖子管理</span>
              </a>
            </li>
            <li :class="{ active: currentView === 'rankings' }">
              <a @click="switchView('rankings')" class="nav-link">
                <i class="icon-rankings"></i>
                <span>排行榜管理</span>
              </a>
            </li>
            <li :class="{ active: currentView === 'tags' }">
              <a @click="switchView('tags')" class="nav-link">
                <i class="icon-tags"></i>
                <span>标签管理</span>
              </a>
            </li>
            <li>
              <a href="#" class="nav-link">
                <i class="icon-comments"></i>
                <span>评论管理</span>
              </a>
            </li>
            <li>
              <a href="#" class="nav-link">
                <i class="icon-categories"></i>
                <span>分类管理</span>
              </a>
            </li>
            <li>
              <a href="#" class="nav-link">
                <i class="icon-settings"></i>
                <span>系统设置</span>
              </a>
            </li>
          </ul>
        </nav>
      </aside>

      <!-- 内容区域 -->
      <section class="content">
        <!-- 仪表盘内容 -->
        <div v-if="currentView === 'dashboard'" class="view-content">
          <!-- 统计卡片 -->
          <div class="stats-cards">
            <div class="stat-card">
              <div class="stat-icon users">
                <i class="icon-users"></i>
              </div>
              <div class="stat-info">
                <h3>总用户数</h3>
                <p class="stat-number">1,234</p>
                <span class="stat-change positive">+12.5%</span>
              </div>
            </div>
            
            <div class="stat-card">
              <div class="stat-icon posts">
                <i class="icon-posts"></i>
              </div>
              <div class="stat-info">
                <h3>总帖子数</h3>
                <p class="stat-number">5,678</p>
                <span class="stat-change positive">+8.2%</span>
              </div>
            </div>
            
            <div class="stat-card">
              <div class="stat-icon comments">
                <i class="icon-comments"></i>
              </div>
              <div class="stat-info">
                <h3>总评论数</h3>
                <p class="stat-number">12,345</p>
                <span class="stat-change negative">-3.1%</span>
              </div>
            </div>
            
            <div class="stat-card">
              <div class="stat-icon views">
                <i class="icon-views"></i>
              </div>
              <div class="stat-info">
                <h3>今日访问量</h3>
                <p class="stat-number">3,456</p>
                <span class="stat-change positive">+18.7%</span>
              </div>
            </div>
          </div>

          <!-- 图表和表格区域 -->
          <div class="dashboard-grid">
            <!-- 访问量趋势图 -->
            <div class="card chart-card">
              <h2>访问量趋势</h2>
              <div class="chart-container">
                <div class="mock-chart">
                  <div class="chart-bar" style="height: 60%"></div>
                  <div class="chart-bar" style="height: 80%"></div>
                  <div class="chart-bar" style="height: 45%"></div>
                  <div class="chart-bar" style="height: 90%"></div>
                  <div class="chart-bar" style="height: 70%"></div>
                  <div class="chart-bar" style="height: 85%"></div>
                  <div class="chart-bar" style="height: 75%"></div>
                </div>
                <div class="chart-labels">
                  <span>周一</span>
                  <span>周二</span>
                  <span>周三</span>
                  <span>周四</span>
                  <span>周五</span>
                  <span>周六</span>
                  <span>周日</span>
                </div>
              </div>
            </div>

            <!-- 最新帖子 -->
            <div class="card table-card">
              <h2>最新帖子</h2>
              <div class="table-container">
                <table>
                  <thead>
                    <tr>
                      <th>标题</th>
                      <th>作者</th>
                      <th>回复数</th>
                      <th>发布时间</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>关于Vue3最佳实践的讨论</td>
                      <td>张三</td>
                      <td>23</td>
                      <td>2023-11-20</td>
                    </tr>
                    <tr>
                      <td>前端性能优化技巧分享</td>
                      <td>李四</td>
                      <td>15</td>
                      <td>2023-11-19</td>
                    </tr>
                    <tr>
                      <td>React Hooks深入理解</td>
                      <td>王五</td>
                      <td>42</td>
                      <td>2023-11-18</td>
                    </tr>
                    <tr>
                      <td>TypeScript高级类型应用</td>
                      <td>赵六</td>
                      <td>18</td>
                      <td>2023-11-17</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>

        <!-- 用户管理内容 -->
        <div v-if="currentView === 'users'" class="view-content">
          <UserManagement />
        </div>

        <!-- 角色管理内容 -->
        <div v-if="currentView === 'roles'" class="view-content">
          <RoleManagement />
        </div>

        <!-- 菜单管理内容 -->
        <div v-if="currentView === 'menus'" class="view-content">
          <MenuManagement />
        </div>

        <!-- 帖子管理内容 -->
        <div v-if="currentView === 'posts'" class="view-content">
          <PostManagement />
        </div>

        <!-- 排行榜管理内容 -->
        <div v-if="currentView === 'rankings'" class="view-content">
          <RankingManagement />
        </div>

        <!-- 标签管理内容 -->
        <div v-if="currentView === 'tags'" class="view-content">
          <TagManagement />
        </div>
      </section>
    </main>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import UserManagement from '../user-management/UserManagement.vue'
import RoleManagement from '../role-management/RoleManagement.vue'
import MenuManagement from '../menu-management/MenuManagement.vue'
import PostManagement from '../post-management/PostManagement.vue'
import RankingManagement from '../ranking-management/RankingManagement.vue'
import TagManagement from '../tag-management/TagManagement.vue'

const router = useRouter()
const username = ref('')
const currentView = ref('dashboard')

// 检查登录状态
onMounted(() => {
  const isLoggedIn = localStorage.getItem('isLoggedIn')
  if (!isLoggedIn) {
    // 如果未登录，重定向到登录页
    router.push('/login')
    return
  }
  
  // 获取用户名
  username.value = localStorage.getItem('username') || '管理员'
  
  // 根据当前路由或查询参数设置初始视图
  const path = router.currentRoute.value.path
  const queryView = router.currentRoute.value.query.view
  
  if (path === '/users' || queryView === 'users') {
    currentView.value = 'users'
  } else if (path === '/roles' || queryView === 'roles') {
    currentView.value = 'roles'
  } else if (path === '/menus' || queryView === 'menus') {
    currentView.value = 'menus'
  } else if (path === '/posts' || queryView === 'posts') {
    currentView.value = 'posts'
  } else if (path === '/rankings' || queryView === 'rankings') {
    currentView.value = 'rankings'
  }
  
  // 确保页面内容正确显示
  // 添加一个小延迟以确保DOM完全渲染
  setTimeout(() => {
    // 触发视图更新以确保内容正确显示
    const event = new Event('resize')
    window.dispatchEvent(event)
  }, 100)
})

// 处理退出登录
const handleLogout = () => {
  localStorage.removeItem('isLoggedIn')
  localStorage.removeItem('username')
  router.push('/login')
}

// 切换视图
const switchView = (view) => {
  currentView.value = view
  
  // 更新URL但不触发页面刷新
  if (view === 'dashboard') {
    history.pushState({}, '', '/dashboard')
  } else if (view === 'users') {
    history.pushState({}, '', '/users')
  } else if (view === 'roles') {
    history.pushState({}, '', '/roles')
  } else if (view === 'menus') {
    history.pushState({}, '', '/menus')
  } else if (view === 'posts') {
    history.pushState({}, '', '/posts')
  } else if (view === 'rankings') {
    history.pushState({}, '', '/rankings')
  }
}
</script>

<style scoped>
.dashboard-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f8fafc;
  font-family: 'Arial', sans-serif;
}

/* 顶部导航栏 */
.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  height: 64px;
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.header-left h1 {
  color: #1e40af;
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.user-info span {
  color: #475569;
  font-size: 14px;
}

.logout-btn {
  padding: 6px 12px;
  background-color: #3b82f6;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.logout-btn:hover {
  background-color: #2563eb;
}

/* 主要内容区域 */
.dashboard-main {
  display: flex;
  flex: 1;
}

/* 侧边栏 */
.sidebar {
  width: 240px;
  background-color: #ffffff;
  box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1);
}

.sidebar-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-nav li {
  margin-bottom: 4px;
}

.sidebar-nav li.active {
  background-color: #eff6ff;
  border-right: 3px solid #3b82f6;
}

.nav-link {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  color: #475569;
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s;
}

.nav-link:hover {
  background-color: #f1f5f9;
  color: #1e40af;
}

.sidebar-nav li.active .nav-link {
  color: #1e40af;
}

.nav-link i {
  margin-right: 12px;
  font-size: 18px;
}

/* 内容区域 */
.content {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}

/* 统计卡片 */
.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.stat-card {
  display: flex;
  align-items: center;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.stat-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 16px;
}

.stat-icon.users {
  background-color: #dbeafe;
  color: #1e40af;
}

.stat-icon.posts {
  background-color: #dcfce7;
  color: #166534;
}

.stat-icon.comments {
  background-color: #fef3c7;
  color: #92400e;
}

.stat-icon.views {
  background-color: #ede9fe;
  color: #5b21b6;
}

.stat-icon i {
  font-size: 24px;
}

.stat-info h3 {
  margin: 0 0 8px 0;
  color: #64748b;
  font-size: 14px;
  font-weight: 500;
}

.stat-number {
  margin: 0 0 4px 0;
  color: #1e293b;
  font-size: 24px;
  font-weight: 600;
}

.stat-change {
  font-size: 12px;
  font-weight: 500;
}

.stat-change.positive {
  color: #16a34a;
}

.stat-change.negative {
  color: #dc2626;
}

/* 图表和表格区域 */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.card {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.card h2 {
  margin: 0 0 16px 0;
  color: #1e293b;
  font-size: 18px;
  font-weight: 600;
}

/* 图表 */
.chart-container {
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.mock-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 160px;
  margin-bottom: 8px;
}

.chart-bar {
  width: 30px;
  background-color: #3b82f6;
  border-radius: 4px 4px 0 0;
}

.chart-labels {
  display: flex;
  justify-content: space-between;
  color: #64748b;
  font-size: 12px;
}

/* 表格 */
.table-container {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e2e8f0;
}

th {
  color: #475569;
  font-weight: 600;
  font-size: 14px;
}

td {
  color: #334155;
  font-size: 14px;
}

tr:hover {
  background-color: #f8fafc;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .dashboard-main {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
  }
  
  .stats-cards {
    grid-template-columns: 1fr;
  }
}
</style>